<template>
	<view class="content">
		
		<view class="list">
			<view class="welcome">会员注册</view>
			<view class="list-call">
				<view class="coolc icon-shouji img"></view>
				<input class="biaoti" v-model="phoneno" type="number" maxlength="11" placeholder="手机号" />
			</view>
			<view class="list-call">
				<view class="coolc icon-mima img"></view>
				<input class="biaoti" v-model="password" type="text" maxlength="32" placeholder="登录密码" :password="!showPassword" />
				<image class="img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @tap="display"></image>
			</view>
			<view class="list-call">
				<view class="coolc icon-pinglun img"></view>
				<input class="biaoti" v-model="code" type="number" maxlength="4" placeholder="验证码" />
				<view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view>
			</view>
			<view class="list-call">
				<view class="coolc icon-tishi img"></view>
				<input class="biaoti" v-model="invitation" type="text" maxlength="12" placeholder="邀请码(选填)" />
			</view>
			<view class="xieyi">
				<image @tap="xieyitong" :src="xieyi==true?'/static/img/icon/selected.png':'/static/img/icon/select.png'"></image>
				<text @tap="xieyitong"> 同意</text>
				<navigator url="blog?id=1" open-type="navigate">《用户注册协议》</navigator>
			</view>
			<view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin">
				<text>提交注册</text>
			</view>
		</view>
		
		<view class="register-section">
			已有账号?
			<navigator url="/pages/simple/login">立即登录</navigator>
		</view>
		
	</view>
</template>

<script>
	var tha,js;
	export default {
		onLoad(){
			tha = this;
			
		},
		onUnload(){
			clearInterval(js)
			this.second = 0;
		},
		data() {
			return {
				phoneno:'',
				password:'',
				code:'',
				invitation:'',
				xieyi:true,
				showPassword:false,
				second:0
			};
		},
		computed:{
			yanzhengma(){
				if(this.second==0){
					return '获取验证码';
				}else{
					if(this.second<10){
						return '重新获取0'+this.second;
					}else{
						return '重新获取'+this.second;
					}
				}
			}
		},
		methods: {
			display() {
			    this.showPassword = !this.showPassword
			},
			xieyitong(){
				this.xieyi = !this.xieyi;
			},
			getcode(){
				if(this.second>0){
					return;
				}
				this.second = 60;
				uni.request({
				    url: 'http://***/getcode.html', //仅为示例，并非真实接口地址。
				    data: {phoneno:this.phoneno,code_type:'reg'},
					method: 'POST',
					dataType:'json',
				    success: (res) => {
						if(res.data.code!=200){
							uni.showToast({title:res.data.msg,icon:'none'});
						}else{
							uni.showToast({title:res.data.msg});
							js = setInterval(function(){
								tha.second--;
								if(tha.second==0){
									clearInterval(js)
								}
							},1000)
						}
				    }
				});
			},
		    bindLogin() {
				if (this.xieyi == false) {
				    uni.showToast({
				        icon: 'none',
				        title: '请先阅读《用户注册协议》'
				    });
				    return;
				}
				if (this.phoneno.length !=11) {
				    uni.showToast({
				        icon: 'none',
				        title: '手机号不正确'
				    });
				    return;
				}
		        if (this.password.length < 6) {
		            uni.showToast({
		                icon: 'none',
		                title: '密码不正确'
		            });
		            return;
		        }
				if (this.code.length != 4) {
				    uni.showToast({
				        icon: 'none',
				        title: '验证码不正确'
				    });
				    return;
				}
				uni.request({
				    url: 'http://***/reg.html',
				    data: {
						phoneno:this.phoneno,
						password:this.password,
						code:this.code,
						invitation:this.invitation
					},
					method: 'POST',
					dataType:'json',
				    success: (res) => {
						if(res.data.code!=200){
							uni.showToast({title:res.data.msg,icon:'none'});
						}else{
							uni.showToast({title:res.data.msg});
							setTimeout(function(){
								uni.navigateBack();
							},1500) 
						}
				    }
				});
				
		    }
		}
	}
</script>

<style lang='scss'>
	page { background:url('/static/img/bg/reg.jpg') no-repeat left top #ffd7cb; background-size:100% auto; }
	.content { display:flex; flex-direction:column; justify-content:center; }
	.list { display:flex; flex-direction:column; width:690upx; margin:230upx auto 0 auto; padding-bottom:40upx; padding-left:36upx; padding-right:36upx; background:#ffffff; border-radius:30upx; }
	.welcome{ width:100%; height:100upx; padding-top:16upx; line-height:80upx; font-size:36upx; font-weight:bold; color:#555; }
	.list-call{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		height:100upx;
		color:#333333;
		border-bottom:1upx solid rgba(230,230,230,.8); position:relative; padding-left:40upx;
	}
	.list-call .img{ width:40upx; font-size:40upx; height:100upx; line-height:100upx; color:#666666; position:absolute; left:0px; top:0px; }
	.list-call .biaoti{ flex:1; text-align:left; font-size:32upx; line-height:100upx; margin-left:16upx; }
	.yzm { color:#FF7D13; font-size:24upx; line-height:64upx; padding:0 36upx; width:auto; height:64upx; border:1upx solid #FFA800; border-radius:50upx; }
	.yzms { color:#999999 !important; border:1upx solid #999999; }
	.dlbutton { width:100%; height:76upx; text-align:center; line-height:76upx; border-radius:50px; margin-top:40upx; background:#8c0027; color:#fff; font-size:$font-lg; }
	.xieyi{
		display:flex;
		flex-direction:row;
		justify-content:left;
		align-items:left;
		font-size: 30upx;
		margin-top:40upx;
		color: #666666;
		text-align:left;
		height:40upx;
		line-height:40upx;
	}
	.xieyi image{ width:40upx; height:40upx; margin-right:12upx; }
	.register-section{
		width:100%; height:120upx; padding-top:30upx; font-size:$font-base; color:$font-color-base; text-align:center;
		navigator{ color:$font-color-spec; margin-left:10upx; display:inline-block; }
	}
</style>
